<template>
  <div class="zaishoushangpinpaixu" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; width: 100vw; overflow: hidden;">
    <mtop></mtop>
    <div style="padding: 0rem 0; margin-top: 0.3rem; background: #fff; padding-bottom: 1rem;">
      <el-table :data="list" style="width: 100%; font-size: 12px;">
          <el-table-column align="center" prop="title" label="标题">
            <template slot-scope="scope">
              <div :style="{color:(!scope.row.is_read?'#000':'#ddd')}">{{scope.row.title}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="150" prop="created_at" label="发布时间">
            <template slot-scope="scope">
              <div :style="{color:(!scope.row.is_read?'#000':'#ddd')}">{{scope.row.created_at}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="ok_count" label="操作">
            <template slot-scope="scope">
              <div class="flexcc">
                <div style="color: rgb(0, 90, 255); cursor: pointer;" @click="xiangqing(scope.row)">详情</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page"
         @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination> -->
      </div>

    <div style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);">
      <mfooter></mfooter>
    </div>
    <el-dialog title="通知详情" :visible.sync="log2" :close-on-click-modal="false" :close-on-press-escape="false" width="800px">
          <div>
            <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">通知标题:</span>{{now.title}}</div>
    <!--        <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">版本号:</span>{{now.version}}</div>
            <div style="margin-bottom: 20px;"><span style="font-weight: bold; margin-right: 10px;">上线时间:</span>{{now.release_at}}</div> -->
            <div style="margin-bottom: 20px;" v-html="now.content"></div>
            <div style="margin-bottom: 20px;" class="flexc"  v-if="now.annex"><span style="font-weight: bold; margin-right: 10px;">附件:</span>
              <div @click="xiazai(now.annex)" style="color: rgb(0, 90, 255); cursor: pointer; margin-right: 20px;">下载</div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="log2 = false">关闭</el-button>
          </span>
        </el-dialog>
	</div>
</template>

<script>
  import mtop from '../mtop.vue'
  import mfooter from '../mfooter.vue'
  import footers from '../footer.vue'
  import fuwenben from '@/components/fuwenben.vue'
	export default {
		name: 'tongzhi',
    components:{
      mfooter,mtop,fuwenben,footers
    },
		data() {
			return {
        tongzhi:{},
        log2:false,
        now:"",
        relo:false,
        log:false,
        search:{
          page:1,
          page_size:200,
        },
        list:[],
        total:0,
			}
		},
		created() {
      //列表
      this.getlist()

		},
		mounted() {
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

      }
		},
		methods: {
      xiazai:function(url){
        console.log(1)
        window.location.href = url  + '?attname='
      },
      xiangqing:function(item){

        axios.get('/agent/message/read?id='+item.id).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.now = item
            this.log2 = true
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

      },
      logshow:function(item){

        if(item){
          this.tongzhi = {
            id:item.id,
            title:item.title,
            content:item.content,
            annex:item.annex
          }
          console.log(this.tongzhi)
        }else{
          this.tongzhi = {
            id:"",
            title:"",
            content:"",
            annex:""
          }
        }
        this.log = true
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
      },
      //列表
      getlist:function(){
        axios.get('/agent/message/list').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data

            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },

		}
	}
</script>


